<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			ul li ul{
				display:none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<h2>菜单一</h2>
				<ul>
					<li>菜单一子选项</li>
					<li>菜单一子选项</li>
					<li>菜单一子选项</li>
				</ul>
			</li>
			
			<li>
				<h2>菜单二</h2>
				<ul>
					<li>菜单二子选项</li>
					<li>菜单二子选项</li>
					<li>菜单二子选项</li>
				</ul>
			</li>
			
			<li>
				<h2>菜单三</h2>
			</li>
			
			<li>
				<h2>菜单四</h2>
				<ul>
					<li>菜单四子选项</li>
					<li>菜单四子选项</li>
					<li>菜单四子选项</li>
				</ul>
			</li>

            <li>
				<h2>菜单四</h2>
				<ul>
					<li>菜单四子选项</li>
					<li>菜单四子选项</li>
					<li>菜单四子选项</li>
				</ul>
			</li>

            <li>
				<h2>菜单四</h2>
				<ul>
					<li>菜单四子选项</li>
					<li>菜单四子选项</li>
					<li>菜单四子选项</li>
				</ul>
			</li>

            <li>
				<h2>菜单四</h2>
				<ul>
					<li>菜单四子选项</li>
					<li>菜单四子选项</li>
					<li>菜单四子选项</li>
				</ul>
			</li>
			
		</ul>
		
		<script type="text/javascript">
			var aul = document.getElementsByTagName("ul")[0];
			var ali = aul.children;
			for(var i=0;i<ali.length;i++){
				ali[i].onclick = function (){
						var  aliul = this.getElementsByTagName("ul")[0];
						for(var i=0;i<ali.length;i++){
							if(ali[i].getElementsByTagName("ul")[0]!=undefined){
								ali[i].getElementsByTagName("ul")[0].style.display="none";
							}
						}
						if(this.getElementsByTagName("ul")[0]!=undefined){
							this.getElementsByTagName("ul")[0].style.display="block";
						}
					
				}
			}
	
		</script>
	</body>
</html>